<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        body {
            margin: 0px;
            font-family: 微软雅黑;
        }

        /*头部样式*/
        #head {
            background-color: white;
            height: 120px;
            position: relative;
        }

        #head a {
            text-decoration: none;
        }

        #head_title {
            font-size: 32px;
            position: absolute;
            margin: 42px 40px;
            font-weight: bold;

        }

        #head_title a {
            color: #076ce0;
        }

        #head_menu {
            font-size: 16px;
            position: absolute;
            right: 103px;
            top: 51px;
        }

        #head_menu a {
            color: black;

        }

        #head_menu > div {
            float: left;
            margin: 0 20px;
        }

        /*图片*/
        #img {
            height: 300px;
            /* 设置背景图片 */
            background-image: url("../front/image/aboutUs/05.jpg");
            /* 设置图片尺寸: 宽 高  */
            background-size: 140% 300px;
            /* 禁止重复 */
            background-repeat: no-repeat;
        }

        /*选项*/
        #body_menu {
            height: 95px;
            padding: 32px 40px 0px 39px;
        }

        #body_menu > div {
            width: 130px;
            height: 44px;
            text-align: center;
            transition-duration: 0.5s; /*设置动画持续时间*/
        }

        #body_menu > div {
            float: left;
            margin-right: 21px;
        }

        #body_menu > div > span {
            line-height: 44px;
            color: white;
        }

        /*正文*/
        .content{
            height: 540px;
            margin: 0 40px;
            width: 94%;
            position: relative;
        }
        .content_d3_map{margin:0;padding:0;}
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}

        .content_d1_text{
            position: absolute;
            width: 60%;
            color: #888888;;
            font-size: 14px;
            line-height: 30px;
        }
        .content_d1_img{
            position: absolute;
            right: 15px;
            top: 15px;
        }
        .content_d2_img{
            float: left;
        }
        .content_d3_phone span{
            float: left;
            margin: 30px 120px 0 120px;
            text-align: center;
        }
        .content_d3_phone>span>i{
            font-size: 50px;
            color: rgba(206, 206, 206, 0.5);
        }
        .content_d3_phone>span>p{
            font-size: 16px;
            color: #888888;
        }
        #tail{
            height: 161px;
            background-color: rgba(23,23,23,0.85);
            position: relative;
            color: rgb(153, 153, 153);
        }
        #tail_address{
            position: absolute;
            left: 30px;
        }
        #tail_phone{
            position: absolute;
            left: 1060px;
            top: 70px;
        }
        #tail_img{
            position: absolute;
            left: 1000px;
            top: 70px;
        }
        #tail_phone>p{
            margin: 5px;
        }
        #tail_last{
            height: 21px;
            background-color: rgba(23,23,23,0.9);
            color: rgb(153, 153, 153);
            padding: 30px 30px;

        }
        #tail_last>span>a{
            text-decoration: none;
            color: rgb(153, 153, 153);
            font-size: 14px;
        }
        /*锚点 回到顶部*/
        #back_top{
            width: 42px;
            height: 42px;
            position: fixed;/*固定定位*/
            bottom: 55px;
            right: 65px;
            display: none;
        }
    </style>

</head>
<body>
<a href="" id="top1"></a>
<div id="bodyApp">
    <div id="head">
        <div id="head_title">
            <a href="./index" v-text="aboutUs.name"></a>
        </div>
        <div id="head_menu">
            <div><a href="./index">首页</a></div>
            <div><a href="">业务资源</a></div>
            <div><a href="./keyServices">特色服务</a></div>
            <div><a href="./newsCenter">新闻中心</a></div>
            <div><a href="./aboutUs" style="color: #076ce0">关于我们</a></div>
        </div>
    </div>
    <div id="img"></div>
    <div id="body_menu">
        <div id="body_menu_d1" @mousemove="fn($event)" style="background-color: #076ce0">
            <span id="body_menu_s1" style="color: white">关于我们</span>
        </div>
        <div id="body_menu_d2" @mousemove="fn($event)" style="background-color: white">
            <span id="body_menu_s2" style="color: #666666">公司荣誉</span>
        </div>
        <div id="body_menu_d3" @mousemove="fn($event)" style="background-color: white">
            <span id="body_menu_s3" style="color: #666666">联系我们</span>
        </div>
    </div>
    <div class="content" id="d1" style="display: inline-block">
        <div class="content_d1_text" v-html="aboutUs.aboutUs">
            <p>XXX物业管理有限公司成立于2013年10月，注册资金303万元整，并于2014年获得ISO9001:2000换版质量管理体系认证。目前公司物业管理覆盖到以武汉市为中心涉及到写字楼、普通住宅、高档小区、工业园、酒店等。XXX物业全力打造武汉市值得信赖的物业管理服务集成商为愿景，我们宗旨是：真诚服务千万家!

公司下设总经理办公室、财务室、采购部、市场部、人事部、操作部等六大部门和众多管理服务中心。并且拥有一支从事多年物业管理服务专业的管理团队，员工均拥有岗位所需的资质证书，骨干力量均为专科及以上学历，管理项目曾多次获得优秀小区、大厦等考评中成绩斐然。

公司自成立以来，内部管理不断完善，经营机制不断创新，并严格遵循“品质服务”的服务宗旨，以“形象树品牌，品牌创市场”的经营理念，大力倡导“热忱、优质、团结、奉献”的企业精神，提出了“真诚服务千万家”的口号，全方位的开展科学管理和亲情式的优质服务。
            </p>
            <br>
            <p>我们的服务理念：</p>
            <p>客户服务管家式 商务服务一站式</p>
            <p>日常维修零缺陷 保安服务零干扰</p>
            <p>优质生活定单式 个性服务酒店式</p>
        </div>
        <div class="content_d1_img">
            <img src="../front/image/aboutUs/01.jpg" alt="">
        </div>
    </div>
    <div class="content" id="d2" style="display: none">
        <div class="content_d2_img"><img src="../front/image/aboutUs/02.webp" alt=""></div>
        <div class="content_d2_img" style="margin: 0 85px;"><img src="../front/image/aboutUs/02.webp" alt=""></div>
        <div class="content_d2_img"><img src="../front/image/aboutUs/02.webp" alt=""></div>
    </div>
    <div class="content" id="d3" style="display: none;margin: 0 90px;width: 85%;">
        <div class="content_d3_map" style="width:100%;height:350px;border:#ccc solid 1px;" id="dituContent"></div>

        <div class="content_d3_phone">
            <span>
                <i class="fa fa-mobile" aria-hidden="true" class="center"></i>
                <p class="center">手机号码</p>
                <p class="center" v-text="aboutUs.phone">13600000000</p>
            </span>
            <span>
                <i class="fa fa-envelope" aria-hidden="true" class="center"></i>
                <p class="center">联系邮箱</p>
                <p class="center" v-text="aboutUs.email">xxx@.com</p>
            </span>
            <span>
                <i class="fa fa-phone-square" aria-hidden="true" class="center"></i>
                <p class="center">联系电话</p>
                <p class="center" v-text="aboutUs.telephone">020-00000000</p>
            </span>
        </div>
    </div>
    <div id="tail">
        <div id="tail_address">
            <p style="font-size: 26px;margin-bottom: 15px">Property Management</p>
            <p style="font-size: 13px">联系邮箱：{{aboutUs.email}}</p>
            <p style="font-size: 13px">联系地址：{{aboutUs.address}}</p>
        </div>
        <div id="tail_img">
            <img src="../front/image/aboutUs/03.png" alt="" height="45">
        </div>
        <div id="tail_phone">
            <p style="font-size: 14px">服务热线</p>
            <p style="font-size: 18px" v-text="aboutUs.telephone">000-000-0000</p>
        </div>
    </div>
    <div id="tail_last">
        <span><a href="/admin">登录管理</a></span>
    </div>
    <div id="back_top">
        <img src="../front/image/aboutUs/04.png" alt="">
    </div>
</div>
</body>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入JQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

<script>
    let v = new Vue({
        el: "#bodyApp",
        data: {
            aboutUs:{}
        },
        methods: {
            fn(e){
                /*获取调用了该方法的对象*/
                e = e.currentTarget;

                let children = document.getElementById("body_menu").children;
                for (const child1 of children) {
                    if(e.id==child1.id){
                        child1.style.backgroundColor = "#076ce0";
                        child1.children[0].style.color = "white";
                        let id = child1.id.split("_")[2];
                        document.getElementById(id).style.display = "inline-block";
                    }else {
                        child1.style.backgroundColor = "white";
                        child1.children[0].style.color = "#666666";
                        let id = child1.id.split("_")[2];
                        document.getElementById(id).style.display = "none";
                    }
                }
            }
        },
        created:function () {
            axios({
                url:"/f-infocompany/aboutUs",
                method:"get"
            }).then(function (response) {
                v.aboutUs = response.data;
                console.log(v.aboutUs);
            })
        }
    })
    /*回到顶部*/
    $(function(){
        $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if( scrollt >50 ){  //判断滚动后高度超过200px,就显示
                $("#back_top").slideDown(500); //淡入
            }else{
                $("#back_top").stop().slideUp(500); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
            }
        });
        $("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},200);
        });
    });

    //地图
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(118.167045,24.521723);//定义一个中心点坐标
        map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{title:"我的标记",content:"我的备注",point:"118.16727|24.520129",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
    ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor:"#808080",
                color:"#333",
                cursor:"pointer"
            });

            (function(){
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click",function(){
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open",function(){
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close",function(){
                    _marker.getLabel().show();
                })
                label.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
                if(!!json.isOpen){
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

    initMap();//创建和初始化地图
</script>
</html>